<template>
  <div class="daed">
    <img class="demo"
      src="https://cimg.axureshop.com/62/54/8e/62548e81ca154ee48b9ac305d825d092/images/%E7%99%BB%E5%BD%95%E7%95%8C%E9%9D%A2/u0.png"
      alt="">
    <div class="img-dl"><img
        src="https://cimg.axureshop.com/62/54/8e/62548e81ca154ee48b9ac305d825d092/images/%E7%99%BB%E5%BD%95%E7%95%8C%E9%9D%A2/u1.png"
        alt=""> </div>
    <div class="daml">
      <h1 class="dadk_el">智慧园区管理平台
        <br><span>SHUANGHUILENGYITONGZHIHUIYUANQU</span>
      </h1>
      <el-card class="box-card">
        <h2 class="daml_de">欢迎登录</h2>


        <!-- <el-tabs v-model="role">
        <el-tab-pane label="权限1" name="inspec"></el-tab-pane>
        <el-tab-pane label="权限2" name="familyPartyRecord"></el-tab-pane>
      </el-tabs> -->
        <el-form :model="ruleForm" :rules="rules" ref="ruleForm" label-width="100px" class="demo-ruleForm">

          <el-form-item label="用户名" prop="username">
            <div><el-input v-model="ruleForm.username"></el-input></div> 
          </el-form-item>

          <el-form-item label="密码" prop="password">
            <el-input v-model="ruleForm.password" show-password></el-input>
          </el-form-item>

          
        </el-form>
        <el-button @click="login" class="den_l" style=" background-color: #007761;  color: #fff;">登录</el-button>
      </el-card>
    </div>





  </div>

</template>
<script>
import API from '../../api'
import { Message } from 'element-ui';
export default {
  data() {
    return {
      ruleForm: {},
      rules: {
        username: [
          { required: true, message: "请输入用户名", trigger: "blur" },
        ],
        password: [{ required: true, message: "请输入密码", trigger: "blur" }],
      },
      role: "inspec",
      num: 1,
    };
  },

  methods: {
    async login() {
      /**
       * 使用form组件的实例上的
       * validate 进行表单校验
       *
       * 可以直接使用 promise 去判断当前的状态是否成功
       */
      await this.$refs.ruleForm.validate();
      // 调用登录接口
      const data = await API.login({
        ...this.ruleForm,
      });
      Message.success('登陆成功')
      this.$store.commit('setToken', data.token)
      this.$router.push('/workingTable')
    },
  },
};
</script>

<style>
.daml {
  border: solid 1px red;

}

.daed {
  width: 100%;
  height: 100%;
}

.demo {
  width: 100%;
  height: 1080px;
}

.img-dl img {
  width: 100%;
  height: 1080px;
  position: absolute;
  left: 0;
  top: 0;
}

.box-card {
  width: 500px;
  height: 400px;
  position: absolute;
  left: 32%;
  top: 30%;
}

.daml_de {
  text-align: center;
  margin: 40px;
}

.den_l {
  margin-left: 34%;
  margin-top: 20px;
  width: 150px;
}

.dadk_el {
  position: absolute;
  left: 40%;
  top: 10%;
  text-align: center;
  color: #fff;
}

.dadk_el span {
  font-size: 16px;
}
</style>